<template>
	<!-- 文档打印的提交订单 -->
	<view class="submintDocument">
		<view class="bgff-show" style="padding: 0rpx 20rpx 38rpx;margin-bottom: 20rpx;">
			<view class="" style="padding: 40rpx 0rpx 40rpx;">
				<!-- messageListWx.path[0].name -->
				<x-submitPrintTop :img="img" :title="title" @easyDocument="domsubmitBolen  && easyDocument()">
				</x-submitPrintTop>
			</view>
			<view class="" style="margin-bottom: 40rpx;">
				<x-submitTabA :domsubmitBolen="domsubmitBolen" @addselect="addselect($event)"></x-submitTabA>
			</view>
			<x-title title="基础设置" :line="false">
				<view class="flex" slot="title2">
					<image src="../../static/size@2x.png" mode=""
						style="width: 24rpx;height:24rpx;margin-right: 12rpx;">
					</image>
					<view class="fs-20 color9W500 ">
						尺寸信息：297*420mm
					</view>
				</view>
			</x-title>
			<x-submitDocumentlongFace @selectlongface="selectlongface($event)" :DomFlag="DomFlag">
				<view class="" slot="oneSide">
					单面
				</view>
				<view class="" slot="longflip">
					双面(长边翻转)
				</view>
				<view class="" slot="briefflip">
					双面(短边翻转)
				</view>
			</x-submitDocumentlongFace>
			<x-title title="颜色设置" :line="false">
			</x-title>
			<x-submitColorText @selectcolor="selectcolor($event)" :colorFlag="colorFlag">
				<view class="" slot="black">
					黑白
				</view>
				<view class="" slot="colours">
					彩色
				</view>
			</x-submitColorText>
		</view>
		<view class="bgff-show" style="padding: 40rpx 40rpx 50rpx;">
			<!-- 打印范围 -->
			<view class="" style="margin-bottom: 30rpx;">
				<x-title title="打印范围" :line="false">
					<view class="flex" slot="title2">
						<image src="../../static/size@2x.png" mode=""
							style="width: 24rpx;height:24rpx;margin-right: 12rpx;">
						</image>
						<view class="fs-20 color9W500 ">
							共{{pagecount}}页，输入值请在页码范围内
						</view>
					</view>
				</x-title>
			</view>
			<view class="" style="margin-bottom: 40rpx;">
				<x-submitpageNumber :endpage="pagecount"></x-submitpageNumber>
			</view>
			<!-- 分割线 -->
			<x-line></x-line>
			<view class="" style="padding: 42rpx 0rpx;">
				<view class="just-between">
					<view class="color-9">
						打印份数
					</view>
					<view class="">
						<u-number-box :disabled="!domsubmitBolen" v-model="num" @change="valChange()" min="1"
							@blur="valblur()" @minus="submitBolen()" @plus="submitBolen()"></u-number-box>
					</view>
				</view>
			</view>
			<x-line></x-line>
			<view class="" style="padding: 42rpx 0rpx 0rpx;">
				<view class="just-between">
					<view class="color-9">
						支付金额
					</view>
					<view class="">
						￥{{dataPrice}}
					</view>
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 30rpx;">
			<x-submitButton @submit="domsubmitBolen  && submit()"></x-submitButton>
		</view>
		<!-- 支付完成的弹窗 -->
		<x-popu :show="showPay">
			<!-- 主标题 -->
			<template slot="content">
				{{titlesshow}}
			</template>
			<!-- 副标题 -->
			<template slot="contentItem">
				{{titleItem}}
			</template>
		</x-popu>
		<!-- 上传的logo -->
		<view v-if="uprogress" class="flex aj-center "
			style=" position: absolute; width: 306rpx;height: 216rpx; left: 50%;  top: 50%; border-radius: 9%;  transform: translate(-50%,-50%); background-color: #313131;">
			<u-circle-progress active-color="#FE5734" :percent="percentgo" style="margin: auto;" :duration="100"
				bg-color="#313131">
				<view class="u-progress-content">
					<x-circle-progress></x-circle-progress>
				</view>
			</u-circle-progress>
		</view>
	</view>
</template>
<script>
	// 上传文件获取页数等信息
	import {
		applefiles
	} from '@/api/applet/applefiles.js'
	import {
		documents
	} from '@/api/applet/document.js'
	// 获取价格张数
	import {
		TotalAmount
	} from "@/api/TotalAmount.js"
	// 提交支付
	import {
		SubmitOrder
	} from "@/api/SubmitOrder.js"
	// 取消支付订单
	import {
		noorder
	} from "@/api/noOrder.js"
	export default {
		data() {
			return {
				percentgo: 0, //上传进度
				titlesshow: '',
				titleItem: '',
				showPay: false, //显示支付完毕的弹窗
				docmprint: true, //在这个界面的标识 
				domsubmitBolen: false,
				DomFlag: false, //全局控制点击事件  提交之后就不可以在点击操作
				colorFlag: false, //颜色的全局控制
				img: '../../static/wps@2x.png',
				title: "",
				valuenum: 1, //默认计时器的数值
				messageListWx: {}, //上个界面的参数
				sku: '',
				pagecount: '', //总页数
				pageindex: '', //开始页数
				yulanContent: {},
				num: 1, //默认计时器的数值
				dataPrice: '', //价格
				saleQty: '',
				unifyO: {}, //支付参数  
				tabselectId: 0, //基础设置
				direId: 0, //颜色设置
				openid: '',
				uprogress: true, //显示的上传logo
				timer: null, //定时器

			}
		},
		onLoad(option) {
			// uni.showLoading({
			// 	title: '检测环境安全...'
			// })
			this.openid = uni.getStorageSync('openid')
			if (typeof option.messageList == 'string' && option.messageList != undefined) {
				console.log(option, "value")
				this.messageListWx = JSON.parse(option.messageList)
				this.title = this.messageListWx.path[0].name.length > 13 ? this.messageListWx.path[0].name.substring(0,
					13) + '...' : this.messageListWx.path[0].name
				console.log(this.messageListWx, 'this.messageListWx ')
			}
			this.applefilesFile();
		},
		onShow() {
			if (uni.getStorageSync('docmprint')) {
				this.domsubmitBolen = true;
				this.DomFlag = true; //全局控制点击事件  提交之后就不可以在点击操作
				this.colorFlag = true; //颜色的全局控制
			}
			uni.removeStorageSync('docmprint')
		},
		onUnload() {
			uni.setStorageSync('docmprint', 'true')
		},
		methods: {
			// A4纸张A3设置
			addselect(index) {
				console.log(index, 'A4纸张A3设置')
			},
			valChange() {
				this.TotalAmount()
			},
			valblur() {
				this.TotalAmount()
			},
			submitBolen() {
				this.TotalAmount()
			},
			// 跳转到预览界面
			easyDocument() {
				uni.navigateTo({
					url: './easyDocument?list=' + JSON.stringify(this.yulanContent)
				})
			},
			applefilesFile() { //赋值获取sku参数
				if (this.$store.state.sku) {
					this.timer = setInterval(() => {
						this.percentgo += 10;
						if (this.percentgo == 90) {
							clearInterval(this.timer);
						}
					}, 1000)
					console.log(this.$store.state.sku, '14003')
					// if (this.$store.state.sku[3].SPUId == 1014) {
					// this.sku = this.$store.state.sku[3].SKUId; //彩色单印 1014004
					this.sku = this.$store.state.sku[2].SKUId; //黑色单印 1014003 fewfcerwferferf
					// 0 spu"1014" sku"1014001"  name:'"小程序手机打印 双面（长边） 黑白"'   
					// 1 spu""1014"" sku""1014002""  name:'""小程序手机打印 双面（长边）彩色""'
					// 2 spu""1014"" sku"""1014003"""  name:'"" "小程序手机打印 单面 黑白"""'
					// 3 spu""1014"" sku"""1014004"""  name:'"小程序手机打印 单面 彩色"'
					// 4 spu""1014"" sku""""1014005""""  name:'""小程序手机打印 双面（短边翻转） 黑白""'
					// 5 spu""1014"" sku""""1014006""""  name:'"小程序手机打印 双面（短边翻转） 彩色""'
					applefiles({
						filePath: this.messageListWx.path[0].path,
						postdata: [{
							fileId: 'unionId', //unicode
							value: this.openid,
						}, {
							fileId: 'orderId',
							value: this.messageListWx.orderId, //顶单id
						}, {
							fileId: 'name', //unicode 
							value: this.messageListWx.path[0].name
						}, {
							fileId: "isPreview",
							value: true
						}]
					}).then(res => {
						this.pagecount = res.data.pages;
						this.pageindex = res.pageindex;
						this.yulanContent = res.data;
						var text1 = [{
							fileId: 'orderId',
							value: this.messageListWx.orderId
						}, {
							fileId: 'unionId',
							value: this.openid
						}];
						documents(text1).then(result => {
							this.TotalAmount(); //获取价格和张数 
						});
					}).catch()
				} else {
					this.applefilesFile() //没有sku再次调用获取
				}
			},
			// sku参数选择
			selectlongface(index) {
				uni.showLoading({
					title: '加载中...'
				})
				this.tabselectId = index;
				console.log(index, '单面双面')
				console.log(this.tabselectId, 'this.tabselectId ')
				if (this.tabselectId == 0 && this.direId == 0) {
					this.sku = this.$store.state.sku[2].SKUId
					console.log(this.sku, '单面黑白')
				}
				if (this.tabselectId == 1 && this.direId == 0) {
					this.sku = this.$store.state.sku[0].SKUId
					console.log(this.sku, '双面(长边)黑白')
				}
				if (this.tabselectId == 2 && this.direId == 0) {
					this.sku = this.$store.state.sku[4].SKUId
					console.log(this.sku, '双面(短边)黑白')
				}
				if (this.tabselectId == 0 && this.direId == 1) {
					this.sku = this.$store.state.sku[3].SKUId
					console.log(this.sku, '单面彩色')
				}
				if (this.tabselectId == 1 && this.direId == 1) {
					this.sku = this.$store.state.sku[1].SKUId
					console.log(this.sku, '双面(长边)彩色')
				}
				if (this.tabselectId == 2 && this.direId == 1) {
					this.sku = this.$store.state.sku[5].SKUId
					console.log(this.sku, '双面(短边)彩色')
				}
				this.TotalAmount()
			},
			selectcolor(index) {
				uni.showLoading({
					title: '加载中...'
				})

				this.direId = index;
				if (this.tabselectId == 0 && this.direId == 0) {
					this.sku = this.$store.state.sku[2].SKUId
					console.log(this.sku, ' 单面黑白')
				}
				if (this.tabselectId == 1 && this.direId == 0) {
					this.sku = this.$store.state.sku[0].SKUId
					console.log(this.sku, '双面(长边) 黑白')
				}
				if (this.tabselectId == 2 && this.direId == 0) {
					this.sku = this.$store.state.sku[4].SKUId
					console.log(this.sku, '双面(短边)黑白')
				}
				if (this.tabselectId == 0 && this.direId == 1) {
					this.sku = this.$store.state.sku[3].SKUId
					console.log(this.sku, '单面彩色')
				}
				if (this.tabselectId == 1 && this.direId == 1) {
					this.sku = this.$store.state.sku[1].SKUId
					console.log(this.sku, '双面(长边)彩色')
				}
				if (this.tabselectId == 2 && this.direId == 1) {
					this.sku = this.$store.state.sku[5].SKUId
					console.log(this.sku, '双面(短边)彩色')
				}
				this.TotalAmount()
			},
			//获取价格张数
			TotalAmount() {
				TotalAmount({
					postdata: [{
							"field": "orderId",
							"value": this.messageListWx.orderId
						}, {
							"field": "SKUId",
							"value": this.sku
						}, {
							"field": "itemQty", //总的页数
							"value": Number(this.pagecount) * Number(this.num),
						}, {
							"field": "itemAuxQty", //份数
							"value": this.num
						}

					]
				}).then(res => {
					this.percentgo = 100;
					this.domsubmitBolen = true;
					this.DomFlag = true;
					this.colorFlag = true;
					this.uprogress = false;
					this.dataPrice = res.data.totalAmount; //价格
					this.saleQty = res.data.saleQty; //份数  
					uni.hideLoading()
				}).catch()
			},
			submit() {
				this.domsubmitBolen = false;
				this.colorFlag = false;
				this.DomFlag = false;
				uni.showLoading({
					title: '检测支付环境...'
				})
				SubmitOrder({
					postdata: [{
						"field": "orderId", //订单id
						"value": this.messageListWx.orderId,
					}, {
						"field": "SKUId", //skuid
						"value": this.sku,
					}, {
						"field": "itemQty", //页数*数量
						"value": this.pagecount * this.num
					}, {
						"field": "itemSaleQty", //张数
						"value": this.saleQty
					}, {
						"field": "itemAuxQty", //份数
						"value": this.num
					}, {
						"field": "tradeType", //支付方式，终端为空，小程序支付：JSAPI
						"value": "JSAPI"
					}, {
						"field": "openId", //支付方式为JSAPI必传
						"value": this.openid
					}, ]
				}).then(res => {
					console.log(res, '最后三千刚才')
					this.unifyO = res.data.unifyOrderResponse;
					uni.hideLoading()
					uni.requestPayment({
						timeStamp: this.unifyO.timeStamp,
						nonceStr: this.unifyO.nonceStr,
						package: this.unifyO.prepayId,
						signType: 'MD5',
						paySign: this.unifyO.sign,
						success: (res) => {
							this.titlesshow = '付款成功'; //主标题
							this.titleItem = '点击确定操作打印机'; //副标题
							this.showPay = true; //显示退出的弹窗    
						},
						fail: (res) => {
							uni.showToast({
								title: '支付失败',
								icon: "error"
							})
							noorder({
								postdata: [{
									"field": "orderId", //订单id
									"value": this.messageListWx.orderId
								}]
							}).then(res => {
								this.domsubmitBolen = true; //关闭弹窗之后再次点击提交支付把这个按钮设置可以点击状态 
								this.colorFlag = true;
								this.DomFlag = true;
							})

						}
					})
				}).catch()
			}

		}
	}
</script>

<style>
	.submintDocument {
		margin: 10rpx 30rpx 0rpx;
	}
</style>
